import React, { useEffect, useRef, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { NavBar, Image as MyImage, Button } from "antd-mobile";
import $fetch from "../../../utils/app/$fetch";
import { ReactComponent as WaitIcon } from '../../../asset/imgs/wait.svg';
import "./style.scss";

const iconColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--logoColor')
  .trim();

export default function ActivityQueue() {
  const location: any = useLocation();
  const navigate = useNavigate();
  const detail: any = location?.state?.detail;
  // const intervalRefs: any = useRef();
  const [audience, setAudience] = useState<any>([]);

  const {
    memberName,
    memberId,
    lineNum,
    memberFormulPhoto,
    eventId,
    eventType,
  }: any = detail;

  useEffect(() => {
    queryQueueList();
    // return () => {
    //   clearInterval(intervalRefs.current);
    // };
  }, []);

  const queryQueueList = async () => {
    // intervalRefs.current = setInterval(async () => {
    const resAudience: any = await $fetch(
      `operation/lineList/${memberId}?eventId=${eventId}`,
      {},
      { loading: false, noGroupId: "no" }
    );

    const audience = await Promise.all(
      resAudience.map(async (item: any) => {
        const result = await queryDetail(item?.customerId, item);
        return result;
      })
    );
    setAudience(audience);
    // }, 1000);
  };

  const queryDetail = async (customerId: any, item: any) => {
    try {
      const res: any = await $fetch(
        `operation/lineDetail/${customerId}/${memberId}?eventId=${eventId}`,
        {},
        { noGroupId: "no" }
      );
      return {
        ...item,
        num: res?.[0]?.num,
        goodsName: res?.[0]?.goodsName,
        waitingTime: res?.[0]?.waitingTime,
      };
    } catch (error) {
      console.log(error, "_____error");
    }
  };

  const back = () => {
    window.history.go(-1);
  };

  return (
    <div className="container_activity_queue">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={() => back()}
      >
        排队详情
      </NavBar>
      <div className="activity_public">
        <li className="that_item">
          <MyImage
            src={memberFormulPhoto}
            fit="cover"
            width="4rem"
            height="4rem"
            lazy={true}
          />
          <div className="item_content_wraper">
            <div className="name">{memberName}</div>
            <div className="queue">
              <div>
                <WaitIcon width={50} height={50} fill={iconColor}/>
                <div>排队人数：</div>
              </div>
              <div>{lineNum}</div>
            </div>
          </div>
        </li>

        <ul>
          <h3>排队人员列表</h3>
          {audience?.map((item: any, index: any) => {
            return (
              <li key={item?.id}>
                <div className="img_content">
                  <img src={item?.avatar} alt="" />
                </div>
                <div className="item_right">
                  <div>
                    <div className="name">{item?.name || "admin"}</div>
                    {eventType === "2" && (
                      <div className="num">
                        <div>使用张数：{item?.num}</div>
                        <img
                          onClick={() => {
                            window.location.href = `tel:${item?.phoneNum}`;
                          }}
                          src={require("../../../asset/imgs/phone.png")}
                          alt=""
                        />
                      </div>
                    )}
                  </div>
                  <div>排队号码：{index + 1}</div>
                </div>
              </li>
            );
          })}
        </ul>
        <div className="that_ask">
          <Button
            onClick={() => {
              if (eventType === "2") {
                navigate(`/activity/dianqie`, {
                  state: {
                    detail: {
                      ...detail,
                      ...audience?.[0],
                    },
                  },
                });
              } else {
                navigate(`/activity/choose`, {
                  state: {
                    detail: {
                      ...detail,
                      customerId: audience?.[0]?.customerId,
                    },
                  },
                });
              }
            }}
          >
            叫号
          </Button>
        </div>
      </div>
    </div>
  );
}
